<template>
  <el-row class="row-one" :gutter="20" background-color="red">
    <el-col :span="6">
      <div class="grid-content ep-bg-purple" id="box1">
        <div class="top">
          <p>营业额</p>
          <el-tag>今日</el-tag>
        </div>
        <div class="middle">
          <p>244465</p>
        </div>
        <div class="bottom">
          <p>昨日数据</p>
          <p>2557.00元</p>
        </div>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="grid-content ep-bg-purple" id="box1">
        <div class="top">
          <p>新增用户</p>
          <el-tag>今日</el-tag>
        </div>
        <div class="middle">
          <p>10086</p>
        </div>
        <div class="bottom">
          <p>昨日数据</p>
          <p>10000</p>
        </div>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="grid-content ep-bg-purple" id="box1">
        <div class="top">
          <p>进驻商家</p>
          <el-tag>今日</el-tag>
        </div>
        <div class="middle">
          <p>200</p>
        </div>
        <div class="bottom">
          <p>昨日数据</p>
          <p>158</p>
        </div>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="grid-content ep-bg-purple" id="box1">
        <div class="top">
          <p>未处理消息</p>
          <el-tag>今日</el-tag>
        </div>
        <div class="middle">
          <p>5</p>
        </div>
        <div class="bottom">
          <p>昨日数据</p>
          <p>0.00元</p>
        </div>
      </div>
    </el-col>
  </el-row>
  <el-row :gutter="20" class="row-two">
    <!-- 折线图 -->
    <el-col :span="24">
      <div class="line" ref="line" id="sss"></div>
    </el-col>
  </el-row>
  <el-row :gutter="20">
    <!-- 饼图 -->
    <el-col :span="12">
      <div class="pie" ref="pie"></div>
    </el-col>
    <!-- echarts地图 -->
  <!--   <el-col :span="12">
      <div class="grid-content ep-bg-purple" />
    </el-col> -->
     <!-- 高德地图 -->
    <el-col :span="12" class="map" id="map"></el-col>
  </el-row>
 <!--  <el-row :gutter="20">
  </el-row> -->
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'HomePage',
  data () {
    return {
      pie: null,
      line: null
    }
  },
  methods: {
    initChartLine () {
      // 基于准备好的dom，初始化echarts实例
      const myChart1 = echarts.init(this.$refs.line)
      this.line = myChart1
      // 指定图表的配置项和数据
      myChart1.setOption({
      /*  title: {
          text: 'Stacked Line'
        }, */
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value'
        },
        color: ['#91C7AE', '#C23531', '#2F4554', '#61A0A8', '#D48265'],
        series: [
          {
            name: '邮件营销',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '联盟广告',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '视频广告',
            type: 'line',
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '直接访问',
            type: 'line',
            stack: 'Total',
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '搜索引擎',
            type: 'line',
            stack: 'Total',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      })

      // 使用刚指定的配置项和数据显示图表。
      // myChart.setOption(option)
    },
    initChartPie () {
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(this.$refs.pie)
      this.chart2 = myChart
      // 指定图表的配置项和数据
      const option = {
        title: {
          text: '用户来源',
          subtext: '纯属虚构',
          left: 'center',
          top: 20
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 15,
          top: 20
        },
        color: ['#91C7AE', '#C23531', '#2F4554', '#61A0A8', '#D48265'],
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 335, name: '直接访问' },
              { value: 310, name: '邮件营销' },
              { value: 274, name: '联盟广告' },
              { value: 235, name: '视频广告' },
              { value: 800, name: '搜索引擎' }
            ],

            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    initMap () {
      const map = new AMap.Map('map', {
        zoom: 11, // 级别
        center: [117.27, 31.85], // 中心点坐标
        viewMode: '3D'// 使用3D视图
      })
      this.map = map
    }

  },
  mounted () {
    this.initChartLine()
    this.initChartPie()
    this.initMap()
  }
}
</script>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 20px;
  // width: 500px;
}
.row-two{
  height: 400px;
  background-color: #fff;
}
.el-col {
  border-radius: 4px;
}
.grid-content {
 height: 180px;
 // background-color: #6d8e9f;
 padding: 20px;
 background-color: #fff;
}

.top,
.bottom {
 display: flex;
 justify-content: space-between;
}

.middle {
 font-size: 30px;
 font-weight: bold;
 height: 80px;
 display: flex;
 align-items: center;
 margin-top: 20px;
 margin-bottom: 20px;
 border-bottom: 1px solid gray;
}
.pie {
  height: 450px;
  // width: 500px;
  background-color: #fff;
}
.map{
  height: 500px;
  background-color: bisque;
}

#sss{
  height: 400px;
}

</style>
